﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_well.cshtml";
    ViewBag.Title = "示功图对比";
}

<div class="xds-no-breadcrumb">
    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div class="row border-bottom page-heading" style="padding:0 20px 10px 20px">
                <div class="row">
                    <div class="col-md-2 col-sm-4 col-xs-4" style="padding-right:0px">
                        <h2 style="float:left">示功图对比</h2>
                    </div>
                    <div class="col-md-6 col-sm-8 col-xs-12"  style="padding:0">
                        <h2 style="float:left;font-size:14px;margin-top:30px">选择时间段：</h2>
                        <div class="" style="float:left;width:300px">
                            <label class="font-noraml">&nbsp;</label>
                            <div class="form-group" id="data_5">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" id="startdate" />
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" id="enddate" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-8 col-xs-9" style="padding-left:10px;">
                        <h2 style="float:left;font-size:14px;margin-top:30px">时间间隔:</h2>
                        <select id="Options" style="margin:25px 0 12px 5px;float:left">
                            <option>全部</option>
                            <option>每小时一个</option>
                            <option>每天一个</option>
                            <option>每月一个</option>
                            <option>每年一个</option>
                        </select>
                        <button type="button" onclick="huizhi()" class="btn btn-primary" style="float:right;margin-top:20px;margin-right:10px;width:90px">确定</button>
                    </div>
                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight ecommerce">
                <div id="main" class="row">
                    <div class="span8 col-sm-7" style="float:left">
                        <div id="analysis" style="width:100%;min-height:450px;height:100%;display:block; margin:0 auto"></div>
                    </div>
                    <div class="span4 col-sm-5" style="height:450px; overflow: auto;float: left; ">
                        <div class="table-overflow">
                            <p>
                                <input type="button" name="Submit1" value="全选" onclick="selectall()" />
                                <input type="button" name="Submit2" value="反选" onclick="inverse()" />
                                <input type="button" name="Submit3" value="不选" onclick="noselect()" />
                                <input type="button" name="Submit4" value="动画" onclick="donghua()" />
                            </p>
                            <table class="table table-bordered table-striped" id="choisetable">
                                <thead><tr><th>√</th><th>采集时间</th><th>冲程</th><th>冲次</th><th>最大载荷</th><th>最小载荷</th></tr></thead>
                                <tbody id="choisetable_tbody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    @Styles.Render("~/plugins/dataPickerStyles")
    @Styles.Render("~/plugins/sweetAlertStyles")
}

@section Scripts {
    @Scripts.Render("~/plugins/dataPicker")
    @Scripts.Render("~/bundles/echarts")
    @Scripts.Render("~/plugins/sweetAlert")
    <script type="text/javascript">
        $(document).ready(function () {
            $("#startdate").attr("value", new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate());
            $("#enddate").attr("value", new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate());
            $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
            sessionStorage.parameter2 = "全部";
            $("#Options").change(function () {
                sessionStorage.parameter2 = $('#Options option:selected').text();
            });
        })
        function huizhi() {
            var type=1;
            if (sessionStorage.parameter2 == "每小时一个")
            {
                type = 24;
            }
            else if (sessionStorage.parameter2 == "每天一个") {
                type = 30;
            }
            else if (sessionStorage.parameter2 == "每月一个") {
                type = 12;
            }
            else if (sessionStorage.parameter2 == "每年一个") {
                type = 0;
            }
            $.ajax({
                url: '/Indicator/AllHistory',
                data: { wellid: sessionStorage.wellid, starttime: $("#startdate").val() + " 00:00:00", endtime: $("#enddate").val() + " 23:59:59", type: type },
                type: 'post',
                async: false,
                dataType: 'json'
            }).success(function (result) {
                $("#choisetable_tbody").empty();
                $.each(result.data, function (i, item) {
                    var t1 = (item.Time.split('('))[1].split(')');
                    var t2 = new Date(parseInt(t1[0]));
                    var DataTime = t2.getFullYear() + '/' + (parseInt(t2.getMonth()) + 1) + '/' + t2.getDate() + ' ' + t2.getHours() + ':' + t2.getMinutes() + ':' + t2.getSeconds();
                    var Indd_Data_Disp = item.MW4097 + item.MW4107 + item.MW4117 + item.MW4127 + item.MW4137 + item.MW4147 + item.MW4157 + item.MW4167 + item.MW4177 + item.MW4187 + item.MW4197 + item.MW4207 + item.MW4217 + item.MW4227 + item.MW4237 + item.MW4247 + item.MW4257 + item.MW4267 + item.MW4277 + item.MW4287;
                    var Indd_Data_Load = item.MW4297 + item.MW4307 + item.MW4317 + item.MW4327 + item.MW4337 + item.MW4347 + item.MW4357 + item.MW4367 + item.MW4377 + item.MW4387 + item.MW4397 + item.MW4407 + item.MW4417 + item.MW4427 + item.MW4437 + item.MW4447 + item.MW4457 + item.MW4467 + item.MW4477 + item.MW4487;
                    var Stroke = item.MW4091;
                    var Stroketimes = item.MW4092;
                    var maxload = item.MW4095;
                    var minload = item.MW4096;
                    $("#choisetable_tbody").append('<tr id="' + item.ID + '"><td><input type=checkbox id = "' + item.ID + '" value = "' + DataTime + '_' + Indd_Data_Disp + '_' + Indd_Data_Load + '"></input></td><td>' + DataTime + '</td><td>' + Stroke/1000 + '</td><td>' + Stroketimes/100 + '</td><td>' + maxload/100 + '</td><td>' + minload/100 + '</td></tr>')
                });
                checkbox();
            }).error(function () {
                swal({
                    title: "Welcome in Alerts!",
                    text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                });
            });
        }
        function checkbox() {
            $('input:checkbox').on('change', function () {
                var z = '';
                $('input:checkbox').each(function () {
                    if ($(this).is(':checked')) {
                        z = z + this.getAttribute('value') + '--';
                    }
                });
                drawcharts(z);
            })
        }
        function donghua() {//通过js选择的checkbox事件
            var table = document.getElementById("choisetable");
            var selectBox = table.getElementsByTagName("input");
            var z = '';
            var num = 0;
            for (i = 0; i < selectBox.length; i++) {
                if (selectBox[i].checked == true) {
                    z = z + selectBox[i].getAttribute('value') + '--';
                    num++;
                }
            }
            if (num == 2) {
                var splitz = z.split('--');
                var start = splitz[1].split('_');
                var end = splitz[0].split('_');
                var times = 0;
                var start_disp_data = start[1].split(' ');
                var start_load_data = start[2].split(' ');
                var end_disp_data = end[1].split(' ');
                var end_load_data = end[2].split(' ');
                var interval_disp_data = new Array();
                var interval_load_data = new Array();
                for (j = 0; j < start_disp_data.length - 1 ; j++) {
                    interval_disp_data.push((parseFloat(end_disp_data[j]) - parseFloat(start_disp_data[j]))/1000);
                    interval_load_data.push((parseFloat(end_load_data[j]) - parseFloat(start_load_data[j]))/100);
                }
                var name = start[0] + "----" + end[0];
                var timer = setInterval(function () {
                    if (times <= 10) {
                        var showdata = new Array();
                        for (j = 0; j < start_disp_data.length - 1 ; j++) {
                            showdata.push([(parseFloat(start_disp_data[j]) / 1000 + parseFloat(interval_disp_data[j]) / 10 * times), (parseFloat(start_load_data[j]) / 100 + parseFloat(interval_load_data[j]) / 10 * times)]);
                        }
                        drawonecharts(name, showdata);
                        times++;
                    }
                    else {
                        clearInterval(timer);
                        drawcharts(z);
                    }
                }, 1000);
            }
            else swal({
                title: "Welcome in Alerts!",
                text: "Please select two time periods."
            });
        }
        function selectall() {
            var table = document.getElementById("choisetable");
            var selectBox = table.getElementsByTagName("input");
            for (i = 0; i < selectBox.length; i++) {
                selectBox[i].checked = true;
            }
            jsselect();
        }
        function noselect() {
            var table = document.getElementById("choisetable");
            var selectBox = table.getElementsByTagName("input");
            for (i = 0; i < selectBox.length; i++) {
                selectBox[i].checked = false;
            }
            jsselect();
        }
        function inverse() {
            var table = document.getElementById("choisetable");
            var selectBox = table.getElementsByTagName("input");
            for (i = 0; i < selectBox.length; i++) {
                if (selectBox[i].checked) {
                    selectBox[i].checked = false;
                } else {
                    selectBox[i].checked = true;
                }
            }
            jsselect();
        }
        function jsselect() {//通过js选择的checkbox事件
            var table = document.getElementById("choisetable");
            var selectBox = table.getElementsByTagName("input");
            var z = '';
            for (i = 0; i < selectBox.length; i++) {
                if (selectBox[i].checked == true)
                    z = z + selectBox[i].getAttribute('value') + '--';
            }
            drawcharts(z);
        }
        function drawcharts(z) {
            var myChart = echarts.init(document.getElementById("analysis"));
            var option = {
                title: {
                    left: 'center',
                    text: '示功图对比情况',
                    textStyle: {
                        fontSize: 13
                    }
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}  {c}"
                    //formatter: function (params) {
                    //    var data = params.data || [0, 0];
                    //    return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
                    //}
                },
                grid: {
                    left: '5%',
                    top:'40px',
                    bottom: '3%',
                    height: '270px',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '位移(米)',
                    axisLine: { onZero: false }
                },
                yAxis: {
                    type: 'value',
                    name: '载荷(KN)',
                    axisLine: { onZero: false }
                },
                legend: {
                    show:true,
                    orient: 'horizontal',
                    x: 'left',
                    y: 'top',
                    top:'320px',
                    borderWidth: 0,
                    data:[]
                },
                series: []
            };
            option.series = new Array();
            option.legend.data = new Array();
            var x = z.split('--');//先将不同的示功图分开
            for (i = 0; i < x.length - 1; i++) {
                var data = [];
                var alldata = x[i].split('_');
                var disp_mapdata = alldata[1].split(' ');
                var load_mapdata = alldata[2].split(' ');
                for (j = 0; j < disp_mapdata.length ; j++) {
                    var temp = [];
                    temp.push(parseFloat(disp_mapdata[j])/1000);
                    temp.push(parseFloat(load_mapdata[j])/100);
                    data.push(temp);
                }
                option.series[i] = new Object();
                option.series[i].name = alldata[0];
                option.series[i].type = 'line';
                option.series[i].symbol = null;
                option.series[i].animation = false;
                option.series[i].smoth = true;
                option.series[i].symbolSize = 1;
                option.series[i].data = data;
                option.legend.data[i] = new Object();
                option.legend.data[i] = alldata[0];
            }
            myChart.setOption(option);
        }
        function drawonecharts(name, data) {
            var myChart = echarts.init(document.getElementById("analysis"));
            var option = {
                title: {
                    left: 'center',
                    text: '示功图对比情况',
                    textStyle: {
                        fontSize: 13
                    }
                },
                exporting: {
                    enabled: true//提供下载
                },
                tooltip: {
                    formatter: function (params) {
                        var data = params.data || [0, 0];
                        return '位移：' + data[0].toFixed(2) + '（米）, 载荷：' + data[1].toFixed(2) + '（KN）';
                    }
                },
                grid: {
                    left: '5%',
                    top: '40px',
                    bottom: '3%',
                    height: '270px',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '位移(米)',
                    axisLine: { onZero: false }
                },
                yAxis: {
                    type: 'value',
                    name: '载荷(KN)',
                    axisLine: { onZero: false }
                },
                legend: {
                    show: true,
                    orient: 'horizontal',
                    x: 'left',
                    y: 'top',
                    top: '320px',
                    borderWidth: 0
                },
                series: []
            };
            option.series = new Array();
            option.series[0] = new Object();
            option.series[0].type = 'line';
            option.series[0].animation = false;
            option.series[0].smoth = true;
            option.series[0].symbolSize = 1;
            option.series[0].data = data;
            option.series[0].showInLegend = false;
            myChart.setOption(option);
        }
    </script>
}
